<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>

<body>
    <div class="demo">
        <input v-model="msg" />
        <br />
        {{msg}}
        <br />
        <input type="button" value="请求" @click="clickme()" />
        <br />
        <input type="text" value="" placeholder="请按enter键" @keydown.enter="enterMethod($event)" />
        <br />
        <table :style="table_style">
            <tr :style="table_style">
                <td :style="table_style">用户ID</td>
                <td :style="table_style">用户名</td>
                <td :style="table_style">密码</td>
                <td :style="table_style">性别</td>
                <td :style="table_style">日期</td>
            </tr>
            <tr v-for="item in allUser" :style="table_style">
                <td :style="table_style">{{item.userId}}</td>
                <td :style="table_style">{{item.userName}}</td>
                <td :style="table_style">{{item.password}}</td>
                <td :style="table_style">{{item.sex}}</td>
                <td :style="table_style">{{item.date}}</td>
            </tr>
            <tr v-show="allUser.length==0">
                <td colspan="5">暂无数据...</td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        window.onload = function () {
            new Vue({
                el: ".demo",
                data: {
                    msg: "v-model",
                    allUser: [
                        { "userId": 1, "userName": "赵铁柱", "password": "zhao", "sex": 1, "date": "2018-12-28T02:26:23.000+0000" },
                        { "userId": 10, "userName": "第八个测试者", "password": "test", "sex": 99, "date": "2019-01-02T01:02:19.000+0000" },],
                    table_style: {
                        border: "1px solid red"
                    },
                },
                methods: {
                    clickme: function () {
                        this.$http({
                            url: "http://localhost:8090/rabbitmq/user/select_all.do",
                        }).then(function (response) {
                            console.log(response.data);
                            this.allUser = response.data.result;
                        });
                    },
                    enterMethod: function (event) {
                        alert(event.keyCode);
                    }
                },
            });
        }
    </script>
</body>

</html>